<%= render 'merchants/common/pagenav' %>

<div id="pageWrapper" class="merchant">
	<div id="pageBody">

		<h1>Create gift card</h1>

		<div class="progressIndicator">

			<ul class="inlineList">
				<li>
					<span>1</span>
					Enter card details
				</li>
				<li>
					<div class="line"></div>
				</li>
				<li class="on">
					<span>2</span>
					Preview
				</li>
				<li>
					<div class="line"></div>
				</li>
				<li>
					<span>3</span>
					Submit
				</li>

			</ul>

		</div>

		<div class="overflow">
			<div class="pageCol1">

				<h4>This is how your offer will look</h4>

				<div class="previewWrapper">
					<!-- THE OFFER BLOCK -->
					<div class="offerWrapper">
						<div class="offerTitle">
							<h2 class="fntDark"><%= @product.product_name %></h2>
							<p class="fnt16">
								<%= @product.product_name %>
							</p>
						</div>

						<div class="overflow">
							<div class="thumb">
								<img src="<%= @product.image_url %>"/>
							</div>

							<div class="offerSpecs">
								<div class="row fntOrange price">
									$<%= @product.price - (@product.price * @product.discount / 100) %>
								</div>
								<div class="row grid">
									<table cellpadding="0" cellspacing="0">
										<tr>
											<td><label>$<%= @product.price %></label> value </td>
											<td><label><%= @product.product_condition.available_quantity - @product.product_condition.sold_quantity %></label> offers left </td>
											<td><label>19 days</label> remaining </td>
										</tr>
									</table>
								</div>

								<div class="row actions">
									<a href="#" class="btn xLarge orangeBtn">Buy <i class="icon-caret-right"></i></a>
									<a href="#" class="btn xLarge"><i class="icon-gift"></i> Gift it</a>
								</div>

								<div class="row">
									<p>
										<strong>In a nutshell:</strong>
										<%= @product.product_description %>
									</p>
									<p>
										<strong>Key terms:</strong>
										<%= @product.key_terms %>
									</p>

								</div>
							</div>
						</div>

						<div class="hr dotted"></div>

						<div class="offerBlock">
							<h4 class="fntDark">All you need to know</h4>
							<%= @product.full_terms %>
						</div>

						<div class="offerBlock">
							<h4 class="fntDark">About the merchant</h4>
							<%= @product.merchant.merchant_info.business_info %>
						</div>

					</div>
				</div>

				<div class="buttonBar">
					<a href="/products/confirm_card" class="btn large">Looks good</a>
					<a href="/products/edit_giftcard/<%= @product.id %>" class="fnt16">Make some edits</a>
				</div>

			</div>

			<div class="pageCol2">
				<div class="infoMessage tipBox">
					We can show some tips here.
				</div>
			</div>
		</div>
	</div>
</div>
